import React, { useState, useRef, useEffect } from 'react'
import { useLocation, useNavigate } from 'react-router-dom'
import { Tabs, Swiper } from '@nutui/nutui-react'
import './Sou.css'
import instance from '../http/instance'
import moment from 'moment';
export default function Search() {
  const [tab1value, setTab1value] = useState('0')
  const [transcript, setTranscript] = useState(''); // 存储转换后文本(语音识别的结果)
  const [recognition, setRecognition] = useState(null);
  const location = useLocation()
  const [text, setText] = useState(location.state.title)
  const [user, setUser] = useState([])
  const navigate = useNavigate()
  const [list, setList] = useState([])
  const getlist = async () => {
    let data = await instance.get(`http://127.0.0.1:8000/search?title=${text}`)
    setList(data.data.data)
  }
  const getuser = async () => {
    let data = await instance.get(`http://127.0.0.1:8000/searchyong?name=${text}`)
    setUser(data.data.data)
  }
  useEffect(() => {
    getlist()
    getuser()
    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; // 兼容不同浏览器
    const recognition = new SpeechRecognition();
    console.log(recognition);
    setRecognition(recognition);

    recognition.lang = 'zh-CN'; // 设置语言为中文（中国大陆）
    recognition.interimResults = false; // 不获取中间结果

    // 设置识别结果回调函数
    recognition.addEventListener('result', (e) => {
      console.log(e.results[0][0].transcript); // 提取识别后的文字
      setTranscript(e.results[0][0].transcript);
    });

    return () => {
      recognition.stop(); // 停止语音识别，防止内存泄露或不必要的资源消耗
    };
  }, [])

  return (
    <div className='box1'>
      <div style={{ marginBottom: "10px" }}>
        <input type="text" value={text} onChange={(e) => {
          setText(e.target.value)
        }} className='searchOne'
        />
        <button className='quxiao' onClick={() => {
          navigate(-1)
        }}>取消</button>
      </div>

      <Tabs
        style={
          {
            '--nutui-tabs-titles-background-color': '#f2f4ff'
          }
        }
        value={tab1value}
        onChange={(value) => {
          setTab1value(value)
        }}
        activeType="smile"
      >
        <Tabs.TabPane title="帖子">
          <div>
            {list.map((item) => {
              return <div>
                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                  <img src={item.touxiang} alt="" width={50} height={50} style={{ borderRadius: '50%' }} />
                  <div style={{ paddingRight: "204px" }}>
                    <p>{item.name}</p>
                    <br />
                    <p>{moment(item.time).format('YYYY/MM/DD HH:mm')}</p>
                  </div>
                  <div>...</div>
                </div>
                <div style={{ marginTop: "20px" }}>
                  <p>{item.title}</p>
                  <img src={item.img_url} alt="" width={200} height={300} />
                  <p>{item.cate[0].name}
                    &nbsp;&nbsp;
                    {item.cate[0].name1}
                  </p>
                </div>
              </div>
            })}
          </div>
        </Tabs.TabPane>w
        <Tabs.TabPane title="用户">
          {user.map((item) => {
            return <div>
              <img src={item.img_url} alt="" width={50} height={50} style={{ borderRadius: '50%' }} />
              <div style={{ display: 'inline-block', marginLeft: '30px' }}>
                <p>{item.name}</p>
                {item.times}
              </div>

            </div>
          })}
        </Tabs.TabPane>
        <Tabs.TabPane title="话题">

        </Tabs.TabPane>
      </Tabs>
    </div>
  )
}
